@extends('admin.layouts.master')

@section('content')

<div class="row aw-list">
	<div class="col-lg-12">
		<section class="row form-inline aw-list-head">
			<div class="col-sm-4">
				<div class="aw-head-add">
					<a class="btn btn-gules" href="javascript:;" v-on:click="List_Info_Layer('')"><i class="icon-plus"></i> 添加分类</a>
				</div>
			</div>
		</section>
	</div>
	<div class="col-md-12">
		<section class="panel aw-content">
			<header class="panel-heading">分类列表</header>
			<table class="table table-striped dataTable table-hover">
				<thead>
					<tr>
						<th class="aw-text-center">ID</th>
						<th>排序ID</th>
						<th>分类名称</th>
						<th>状态</th>
						<th>备注</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody v-for="(list, key)  in lists">
					<tr class="aw-td-eee">
						<td class="aw-text-center">@{{list.id}}</td>
						<td></td>
						<td v-if="list.depth==1 && list.count>0">@{{list.name}} <i class="icon-folder-open"></i></td>
						<td v-if="list.depth==1 && list.count==0">@{{list.name}} <i class="icon-folder-open-alt"></i></td>
						<td v-if="list.depth==2">@{{list.name}}</td>
						<td>@{{list.status_text}}</td>
						<td>@{{list.desc}}</td>
						<td>
							<button class="btn btn-gules btn-xs" v-on:click="List_Status(list.id,2,'禁用')" v-if="list.status==1">
								<i class="icon-eye-close"></i> 禁用
							</button>
							<button class="btn btn-green btn-xs" v-on:click="List_Status(list.id,1,'启用')" v-if="list.status==2">
								<i class="icon-eye-open"></i> 启用
							</button>
							
							<button class="btn btn-green btn-xs" v-on:click="List_Info_Layer(list.id,key)">
								<i class="icon-pencil"></i> 编辑
							</button>
							<button class="btn btn-gules btn-xs aw-hide" v-on:click="List_Status(list.id,-1,'删除')">
								<i class="icon-trash"></i> 删除
							</button>
							
							<button class="btn btn-gules btn-xs" v-on:click="List_Info_Layer('',list.id)">
								<i class="icon-plus"></i> 添加二级分类
							</button>
						</td>
					</tr>
					<tr v-for="(li, key)  in list.nav_li">
						<td class="aw-text-center">@{{li.id}}</td>
						<td><input type="text" class="form-control Js-sort-focusout" :data-id="li.id" :data-sort="li.sort" :value="li.sort" style="height:22px;width:40px;padding:0px 5px;text-align: center;display:inline-block;"></td>
						<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@{{li.name}}</td>
						<td>@{{li.status_text}}</td>
						<td>@{{li.desc}}</td>
						<td>
							<button class="btn btn-gules btn-xs" v-on:click="List_Status(li.id,2,'禁用')" v-if="li.status==1">
								<i class="icon-eye-close"></i> 禁用
							</button>
							<button class="btn btn-green btn-xs" v-on:click="List_Status(li.id,1,'启用')" v-if="li.status==2">
								<i class="icon-eye-open"></i> 启用
							</button>
							
							<button class="btn btn-green btn-xs" v-on:click="List_Info_Layer(li.id,key)">
								<i class="icon-pencil"></i> 编辑
							</button>
							<button class="btn btn-gules btn-xs aw-hide" v-on:click="List_Status(li.id,-1,'删除')">
								<i class="icon-trash"></i> 删除
							</button>
							
						</td>
					</tr>
				</tbody>
			</table>
			<div class="aw-text-center aw-list-null" v-if="lists.length==0">暂无数据</div>
			<div class="col-md-12 aw-hide Js-layer-nav-info">
				<div class="aw-layer-edit-icon aw-layer-edit-station">
					<div class="form-group">
						<label class="control-label">分类层级：</label>
						<select class="form-control" id="depth" name="depth" v-model="form.depth" v-bind:value="form.depth">
                        	<option value="1">一级分类（分类类别）</option>
                        	<option value="2">二级分类</option>
                        </select>
					</div>
					<div class="form-group">
						<label class="control-label">所属类别（一级分类勿选）：</label>
						<select class="form-control" id="id_category" name="id_category" v-model="form.id_category" v-bind:value="form.id_category">
                        	<option value="0">请选择所属类别</option>
                        	<option v-for="(nav_list, key) in select_nav_list" :value="nav_list.id">@{{nav_list.name}}</option>
                        </select>
					</div>
					<div class="form-group">
						<label class="control-label">分类名称：</label>
						<div class="">
							<input class="form-control" type="text" placeholder="请输入分类名称" id="name" name="name" v-model="form.name" v-bind:value="form.name">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label">备注：</label>
						<div class="">
							<input class="form-control" type="text" placeholder="请输入备注内容" id="desc" name="desc" v-model="form.desc" v-bind:value="form.desc">
						</div>
					</div>
					<div class="col-md-12 aw-content-btn">
						<a class="btn btn-gules Js-layer-edit-project-btn" href="javascript:;" v-on:click="List_Info_Save(form.id)">添加</a>
						<a class="btn btn-gray Js-layer-colse" href="javascript:;">取消</a>
					</div>
				</div>
			</div>
		</section>
	</div>
</div>

@section('pagejs')
@parent
<style>
.aw-td-eee td{background:#eee !important;}
</style>
<script type="text/javascript" src="/admin/js/vue-page.js"></script>
<script type="text/javascript" src="/admin/js/page.js"></script>
<script type="text/javascript">
var MJS_URLArry=URLArry;
//ajax参数
function AD_List(status){
	MJS_URLArry.status=status;
	return AD_list={
		api:'/adminapi/class/class-list',
		form_data:MJS_URLArry,
		tips:false,
	}
}
var AD_list=AD_List(0)
//默认数据
function VD_form(){
	return data={id:'',id_category:0,depth:1,name:'',icon:'',desc:''}
}
vm=new Vue({
	el:'#Vue-Body',
	data:{
		lists:[],
		select_nav_list:[],
		form:VD_form(),
	},created(){
		var VueApp=this
		getData(AD_list,function(vue_data){
			console.log(23123)
			VueApp.lists=vue_data.list;
			VueApp.select_nav_list=vue_data.list;
			console.log(VueApp)
			console.log(VueApp.lists)
		})
	},methods:{
		Call_back:function(page){
			Vm_Call_back_Page(page)
		},List_Sort:function(id,sort){
			console.warn('Vue-function:刷新排序事件 id='+id);
			var ajax_data={
				api:'/adminapi/class/class-sort',
				form_data:{id:id,sort:sort},
				tips:'分类排序成功',
			}
			postData(ajax_data)
			//刷新数据
			Vm_List_Get_Data(this.page_this)
		},List_Status:function(id,status,tips){
			var AD_status={
				api:'/adminapi/class/class-status',
				form_data:{id:id,status:status},
				tips:tips+'分类成功',
				msg:'是否'+tips+'该分类？',
			}
			Vm_List_Status(AD_status)
		},List_Info_Layer:function(id,id_category){
			vm.form=VD_Form();
			console.warn('Vue-function:添加/编辑项目弹框事件 id='+id);
			var title='添加';
			if(id){
				title='编辑'
				$('.Js-layer-edit-project-btn').html('保存')
				var AD_info={
					api:'/adminapi/class/class-info',
					form_data:{id:id},
					tips:false,
				}
				getData(AD_info,function(data_nav_info){
					console.log('data_nav_list')
					console.log(data_nav_info)
					vm.form=data_nav_info;
					Layer_Open()
				})
			}else{
				vm.form=VD_Form();
				if(id_category){
					vm.form.id_category=id_category;
					vm.form.depth=2;
				}
				Layer_Open()
			}
			function Layer_Open(){
				layer.open({
					type:1,
					title:title+'分类',
					//closeBtn: 0, //不显示关闭按钮
					area: ['400px','450px'], //宽高
					content:$('.Js-layer-nav-info')
				});
			}
		},List_Info_Save:function(id){
			console.warn('Vue-function:添加/编辑项目事件 id='+id);
			var data_tips='添加';
			if(id){
				data_tips='编辑';
			}
			if(this.form.depth==1){
				this.form.id_category=0;
			}
			var ajax_data_icon={
				api:'/adminapi/class/class-save',
				form_data:this.form,
				tips:data_tips+'分类成功',
			}
			postData(ajax_data_icon,function(){
				setTimeout(function(){
					layer.closeAll();
					Vm_List_Get_Data(vm.page_this)
				},3000)
			});
		},Console_Log:function(){
			console.warn('Vue-function:打印vue事件');
			console.log(this)
			console.log(this.lists)
		}
	},watch:{
	    'form.depth':function(val,oldval){
	        //监听a的变化
	        console.log(val,oldval)
	        if(val==2){
	           	if(this.form.count>0){
	           		this.form.depth=1;
	           		msgTips('该分类下有二级分类,不能做此操作',2)
	           		return;
	           	}
	           	if(this.form.id_category_ol){
	           		this.form.id_category=this.form.id_category_ol;
	          	}
	        }
	        if(val==1){
	          	this.form.id_category=0;
	        }
	    },'form.id_category':function(val,oldval){
	        //监听a的变化
	        console.log(val,oldval)
	        this.form.id_category_ol=oldval;
	        if(val>0){
	          	this.form.depth=2;
	        }
	    }
	}	
})
$(document).on('focusout','.Js-sort-focusout',function(){
	var This=$(this);
	var id=This.attr('data-id');
	var sort=This.attr('data-sort');
	var sort_val=This.val();
	console.log(sort)
	console.log(sort_val)
	if(sort==sort_val){
		console.log(sort_val)
		return;
	}
	vm.List_Sort(id,sort_val)
})
</script>

@endsection

@endsection